<template>
  <div>百分比显示
    <div class="bottom"
         id="echart"
         ref="mychart">

    </div>
  </div>
</template>

<script>
/*
var i = 0
setInterval(function () {
myChart.dispatchAction({
    type: 'highlight',          //高亮指定的数据图形。通过seriesName或者seriesIndex指定系列。如果要再指定某个数据可以再指定dataIndex或者name。
    //type: 'downplay',           //取消高亮指定的数据图形。通过seriesName或者seriesIndex指定系列。如果要指定某个数据可以再指定dataIndex或者name。
    //seriesIndex: number|Array,  // 可选，系列 index，可以是一个数组指定多个系列
    //seriesName: string|Array,   // 可选，系列名称，可以是一个数组指定多个系列
    dataIndex: i,          // 可选，数据的 index
    //name: string                // 可选，数据的 名称
});
setTimeout(function() {
    myChart.dispatchAction({
    // type: 'highlight',          //高亮指定的数据图形。通过seriesName或者seriesIndex指定系列。如果要再指定某个数据可以再指定dataIndex或者name。
    type: 'downplay',           //取消高亮指定的数据图形。通过seriesName或者seriesIndex指定系列。如果要指定某个数据可以再指定dataIndex或者name。
    //seriesIndex: number|Array,  // 可选，系列 index，可以是一个数组指定多个系列
    //seriesName: string|Array,   // 可选，系列名称，可以是一个数组指定多个系列
    dataIndex: i-1,          // 可选，数据的 index
    //name: string                // 可选，数据的 名称
});
}, 1000);

i++
    // myChart.setOption(option, true);
},2000);

*/
import echarts from 'echarts'
export default {
  name: 'singleDatePie',
  data () {
    return {
      myChart: {},
      option: {
        color: ['#7EC0EE', '#FF9F7F', '#FFD700', '#C9C9C9', '#E066FF', '#C0FF3E'], // 设置默认的调色盘，在未指定颜色时，顺序选择
        // 标题组件，包含主标题和副标题
        title: {
          show: true,
          text: '执行任务',
          x: 'center',
          textStyle: {
            fontSize: '15',
            color: 'green',
            fontWeight: 'bold'
          }
        },
        //  提示框组件
        tooltip: {
          // 是否显示提示框组件，包括提示框浮层和 axisPointe
          show: false,
          // 触发类型: item:数据项触发，axis：坐标轴触发
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        // // 图例
        legend: {
          orient: 'vertical',
          left: 'center',
          bottom: '2%',
          data: ['剩余车位数'],
          textStyle: {
            color: '#fff' // 图例文字颜色
          }
        },

        // 系列列表。每个系列通过 type 决定自己的图表类型
        series: [
          {
            // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
            name: '任务进度',
            type: 'pie',
            // 饼图的半径，数组的第一项是内半径，第二项是外半径
            radius: ['50%', '70%'],
            // 是否启用防止标签重叠策略，默认开启
            avoidLabelOverlap: false,
            // 取消鼠标悬浮动画
            hoverAnimation: false,
            // 初始动画时长
            animationDuration: 2000,
            // 标签的视觉引导线样式，在 label 位置 设置为'outside'的时候会显示视觉引导线
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                // 数据值
                value: 20,
                // 数据项名称
                name: '剩余车位数',
                // 该数据项是否被选中
                selected: false,
                // 单个扇区的标签配置
                label: {
                  normal: {
                    // 是显示标签
                    show: true,
                    position: 'center',
                    fontSize: 20,
                    // 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行
                    formatter: '{d}%',
                    color: '#fff'
                  }
                },
                itemStyle: {
                  // 常态样式
                  normal: {
                    // 渐变色生成器：五个参数，前4个参数依次对应右/下/左/上四个方位，0 0 0 1则代表渐变色从正上方开始；第5个参数则是一个数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置, color不用多说肯定是表示颜色了
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: '#00A8F0' },
                      // { offset: 0.5, color: '#999' },
                      { offset: 1, color: '#7CD5A1' }
                    ])

                  }
                  // 选中样式
                  // emphasis: {
                  //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  //     { offset: 0, color: '#2378f7' },
                  //     { offset: 0.7, color: '#2378f7' },
                  //     { offset: 1, color: '#83bff6' }
                  //   ]),
                  //   borderColor: '#999',
                  //   borderWidth: 3, // 设置描边宽度
                  //   borderType: 'solid', // 设置描边类型
                  //   barBorderRadius: 15 // 统一设置四个角的圆角大小
                }
              },
              {
                value: 80,
                label: {
                  normal: {
                    show: false
                  }
                },
                itemStyle: {
                  // 常态样式
                  normal: {
                    // 渐变色生成器：五个参数，前4个参数依次对应右/下/左/上四个方位，0 0 0 1则代表渐变色从正上方开始；第5个参数则是一个数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置, color不用多说肯定是表示颜色了
                    color: '#333333'
                  }
                  // 选中样式
                  // emphasis: {
                  //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  //     { offset: 0, color: '#2378f7' },
                  //     { offset: 0.7, color: '#2378f7' },
                  //     { offset: 1, color: '#83bff6' }
                  //   ]),
                  //   borderColor: '#999',
                  //   borderWidth: 3, // 设置描边宽度
                  //   borderType: 'solid', // 设置描边类型
                  //   barBorderRadius: 15 // 统一设置四个角的圆角大小
                }
              }
            ]
          }
        ]
      },
      newoption: {}
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.setEchart()
    })
  },
  methods: {
    // 创建实例并生成表格
    setEchart () {
      this.myChart = echarts.init(this.$refs.mychart) // 创建实例
      this.myChart.clear()
      this.newoption = this.option
      this.myChart.setOption(this.newoption) // 生成图表
    }

  },
  destroyed () {

  }
  // computed: {
  //   pieSeriesDateLength () {
  //     return this.option.series[0].data.length
  //   }
  // }
}
</script>

<style lang='scss' scoped>
.bottom {
  width: 600px;
  height: 400px;
  background-color: #051930;
}
</style>
